// rrweb录屏插件hooks，如果想使用录屏功能，请查找相关的rrweb使用方法，此处仅是说明hooks使用方法

{ /* <link
    rel="stylesheet"
    href="https://cdn.jsdelivr.net/npm/rrweb@1.1.2/dist/rrweb.min.css"
  />

<script src="https://cdn.jsdelivr.net/npm/rrweb@1.1.2/dist/rrweb.min.js"></script> */ }

import { ref, onMounted, onBeforeUnmount } from 'vue'
export default function (info) {
  console.log('info', info)
  if (!info.loginId || !info.userId) {
    return
  }
  let events = ref([])
  let eventsArr = ref([])
  let timer = ''

  // 开始录屏
  const startVideo = () => {
    window.rrweb.record({
      emit(event) {
        // 用任意方式存储 event
        console.log(event, 'eventevent')
        events.value.push(event)
      }
    })
  }
  //   发送数据-定时
  const setDataTimer = () => {
    clearInterval(timer)
    timer = setInterval(() => {
      setData()
    }, 10000)
  }

  //   发送数据
  const setData = () => {
    eventsArr.value = [...eventsArr.value, ...events.value]
    events.value = []
    const source = encodeURI(JSON.stringify(eventsArr.value))
    // console.log('str===', source)
    // console.log('11111======', JSON.parse(decodeURI(str)))
    const query = {
      timestamp: new Date().getTime(),
      data: {
        userId: info.userId,
        loginId: info.loginId,
        source: source
      }
    }
    console.log(query, 'query==')
  }

  onMounted(() => {
    events = ref([])
    eventsArr = ref([])
    timer = ''
    clearInterval(timer)
    startVideo()
    setDataTimer()
  })
  onBeforeUnmount(() => {
    clearInterval(timer)
    setData()
  })
}
